<template>
    <div>
        <headers></headers>
        <div style="height:calc(100vh - 3.69rem);overflow: auto;padding-bottom:0.75rem;">
            <img src="@/assets/mobile/banner.jpg" style="width:100vw;" alt="">
            <div class="bigBox">
                <div class="titleBtn">
                    <span class="span" @click="()=>{
                        this.$router.push('/apply')
                    }">
                        <p>
                            <img src="@/assets/mobile/icon2.png" alt="">
                            学习报名
                        </p>
                    </span>
                    <span @click="login">
                        <img src="@/assets/mobile/icon1.png" alt="">
                        立即登录
                    </span>
                </div>
                <div class="conter" v-for="(item,index) in dataList" :key="index">
                    <div class="content-title">
                        <span>{{item.title}}{{platform('xingye')||platform('huadi')?'':'人员'}}</span>
                    </div>
                    <div class="content-li-box">
                        <ul>
                            <li :class="index%2==0?'noneLi':''" v-for="(it,index) in item.list" :key='it.id' @click="goApply(item.title)">
                                <span>
                                    {{it.title}}
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="conter">
                    <div class="content-title">
                        <span>培训公告</span>
                        <p style="margin:0;"  @click="()=>{
                            this.$router.push('/regulations')
                        }">更多></p>
                    </div>
                    <div class="content-px-box">
                        <li v-for="(item) in pxlist" :key='item.id' @click="clickLi(item)">
                            <div>
                                <span>
                                {{item.title}}
                                </span>
                                <!-- {{item.update_time?item.update_time.split(' ')[0]:item.create_time.split(' ')[0]}} -->
                                <p>{{item.create_time}}</p>
                            </div>
                            <img :src="item.cover?item.cover:imgsrc" alt="">
                        </li>
                    </div>
                </div>
                <div class="conter">
                    <div class="content-title">
                        <span>政策法规</span>
                        <p style="margin:0;" @click="()=>{
                            this.$router.push('/training')
                        }">更多></p>
                    </div>
                    <div class="content-zc-box">
                        <li v-for="(item) in zclist" :key='item.id' @click="clickLiA(item)">
                            <span>
                                {{item.title}}
                            </span>
                            <!-- {{item.update_time?item.update_time.split(' ')[0]:item.create_time.split(' ')[0]}} -->
                            <p>{{item.create_time}}</p>
                        </li>
                    </div>
                </div>
                <footers></footers>
            </div>
        </div>
    </div>  
</template>

<script>
import {mapGetters} from 'vuex'
import headers from '../header'
import footers from '../footer'
import {articleList,subjectList} from '@/api/apply.js'
import'@/styles/mobile.css';
export default {
    computed:{
        ...mapGetters(['init','http'])
    },
    components:{
        headers,
        footers
    },
    data() {
        return {
            list:[
                {
                    id:1,
                    title:111,
                },
                {
                    id:2,
                    title:111,
                },
                {
                    id:3,
                    title:111,
                },
                {
                    id:4,
                    title:111,
                },
                {
                    id:5,
                    title:111,
                },
            ],
            pxlist:[],
            zclist:[],
            dataList:[],
            imgsrc:require('@/assets/pxgg.jpg'),
            imgsrc2:require('@/assets/zcfg.jpg'),
        }
    },
    methods: {
        seach(name){
            articleList({page:1,limit:3,category:name}).then(res=>{
                if(res.code==200){
                    if(name=='培训动态'){
                        this.pxlist = res.data.list
                    }else{
                        this.zclist = res.data.list
                    }
                }
            })
        },
        clickLi(row){
            this.$router.push({
                path:'/regulations/details',
                query:{
                    content:row.content,
                    title:row.title,
                    date:row.create_time,
                }
            })
        },
        clickLiA(row){
            this.$router.push({
                path:'/training/details',
                query:{
                    src:row.file
                }
            })
        },
        goApply(name){
            this.$router.push({
                path:'/apply',
                query:{
                    name,
                }
            })
        },
         async getdata(){
            this.dataList=[]
            let list = this.init.selected_gz.split(',')
            this.loading = true
            for(let i=0;i<list.length;i++){
                let item = list[i]
                let index = i
                await subjectList(item).then(res=>{
                    if(index+1==list.length){
                        this.loading = false
                    }
                    this.dataList.push({list:res,title:item,srot:index})
                })
            }
            this.dataList.sort(this.compare('srot'))
        },
        compare(prop){
            return (a,b)=>{
                // return (a.srot - b.srot)
                let value1 = a[prop]
                let value2 = b[prop]
                return (value1 - value2)
            }
        },
        login(){
            window.open(this.http+'/user','_self')
        }
    },
    created() {
        this.getdata()
        this.seach('培训动态')
        this.seach('政策法规')
    },
}
</script>
<style>
:root{
    font-size: 16px;
}

ul{
    margin:0;
    padding:0;
}
li{
    list-style-type:none;
}
</style>
<style lang="scss" scoped>
.bigBox{
    padding: 0 0.75rem;
    // background: #F5F5F5;
    width: 100vw;
    position: relative;
    padding-top:2.375rem;
}
.titleBtn{
    position: absolute;
    top: -2.375rem;
    border-radius: 6px;
    height:4.75rem;
    width:calc(100% - 1.5rem);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    // padding:0 2.5rem;
    
    span{
        padding:0 2.5rem;  
        font-size: 1rem;
        color: #333;
        display: flex;
        height:100%;
        align-items: center;
        justify-content: center;
        img{
            width:1.25rem;
            height:1.25rem;
            margin-right:0.5rem;
        }
    }
    p{
        padding:0 2.5rem;  
        margin:0;
        display: flex;
        align-items: center;
    }
    .span{
        padding:0;  
        display: flex;
        &::after{
            content:'';
            width: 1px;
            height:2.5vh;
            // margin-left:2.5rem;
            border-right:1px solid #ddd;
        }
    }
}
.conter{
    // margin-top:3.125rem;
    border-radius: 6px;
    margin-top: 0.75rem;
    background: #fff;
    // width: calc(100% - 1.5rem);
    padding:1.8vh 3.2vw;
    .content-title{
        &>span{
            display: inline-block;
            // padding:18px 0;
            font-size: 1rem;
            font-weight: 600;
            color:#333333;
            &::after{
                content:'';
                display: block;
                margin-top:8px;
                height:4px ;
                width:2rem;
                background:linear-gradient(to right,#1677FF, #31AFFF , #ffffff) ;
            }
        }
        &>p{
            font-size: 0.8rem;
            color:#999;
            float: right;
            cursor: pointer;
            padding-top:5px;
        }
    }
    .content-li-box{
        margin-top:5px;
        ul{
            display: flex;
            flex-wrap: wrap;
            margin:0;
            padding:0;
            justify-content: space-between;
            li{
                list-style-type:none;
                width:42vw;
                height:13vh;
                // margin-left:0.75rem;
                margin-top:0.75rem;
                // background: #f00;
                // background: #F9F9F9;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                display: flex;
                justify-content: center;
                align-items: center;
                padding:0 10px;
                cursor: pointer;
                border-radius: 6px;
                
                span{
                    color: #000;
                    font-size: 1rem;
                }
            
                &:hover{
                    background: #1677FF; 
                    span{
                        color:#fff;
                    }
                }
            }
                
        }
    }
    .noneLi{
        margin-left:0 !important;
    }
    .content-px-box{
        display: flex;
        flex-direction: column;
        li{
            display: flex;
            justify-content: space-between;
            flex:1;
            height:12vh;
            padding-top:1.8vh;
            img{
                width:26.7vw;
                height:12vh;
            }
            div{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding-right:3.2vw;
                span{
                    font-size: 1rem;
                    font-weight: 700;
                }
            }
        }
    }
    .content-zc-box{
        display: flex;
        flex-direction: column;
        li{
            display: flex;
            justify-content: space-between;
            // flex:1;
            height:12vh;
            padding:1.8vh 0;
            flex-direction: column;
            border-bottom: 1px solid #ddd;
            span{
                font-size: 1rem;
                font-weight: 700 !important;
            }
            p{
                color:rgba($color: #999999, $alpha: 1.0);
            }
            &:last-child{
                border-bottom: none;
            }
        }
    }
}
</style>